<template>
    <div class="column column--full">
        <div class="element element-company">
            <div class="row" style="margin-bottom:10px;">
                <!-- 先不写 -->
                <!-- <input v-mode="searchData" class="search__ticker" type="text" placeholder="switch_quote"> -->
                <!-- <span class="search__divider">|</span> -->
                <div class="company__symbol">
                    <span class="company__ticker">{{ props.label }}</span>
                    <span class="company__market"></span>
                </div>
            </div>
            <div class="row row-flex">
                <h1>{{ leftData.company_name }}</h1>
                <router-link to="/watchList" class="btn">add DJIA to watchlist</router-link>
            </div>
        </div>
        <div class="linetu">
            <div class="column column--aside">
                <div class="element element--intraday">
                    <div style="">
                        <div style="width:100%;text-align:right">
                            <i class="icon--lock"></i>
                            <span class="status">Closed</span>
                        </div>
                        <span class="data">{{ leftData.close }}</span><br>
                        <bg-quote :class="[leftData.change_ratio < 0 ? 'negative' : 'positive']">
                            <i class="icon--caret"></i>
                            <span class="">{{ leftData.change_money }}</span>
                            <span class="per">{{ leftData.change_ratio }}%</span>
                            <div class="time">
                                " Last Updated: "<span>{{ leftData.current_time }} </span>
                            </div>
                        </bg-quote>
                    </div>
                    <!-- <div class="intraday__close">
                        <p class="title">Previous Close</p>
                        <p class="value">39,065.26</p>
                    </div> -->
                </div>

            </div>
            <div class="column column--primary">
                <div class="chart__figure">
                    <div class="chart__range">
                        <select class="dropdown dropdown--chart" v-model="chartValue" @change="changeChart">
                            <option selected="" value="minute">1Mi</option>
                            <option value="hour">1H</option>
                            <option value="day">1M</option>
                            <option value="week">1D</option>
                            <option value="month">1W</option>
                            <option value="year">1Y</option>
                            <!-- <option value="P6M">6M</option>
                            <option value="YTD">YTD</option>
                            <option value="P1Y">1Y</option>
                            <option value="P3Y">3Y</option>
                            <option value="ALL">All</option> -->
                        </select>
                        <el-icon class="icons">
                            <CaretBottom />
                        </el-icon>
                    </div>
                    <div id="chart" style="width:100%;height:228px;" ref='myRef'></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
const myRef = ref()
import homeRequest from "@/api/home.js";
const props = defineProps(['label'])
onMounted(() => {
    getLeftStock()
    getTime()  //k线图
})
const leftData = ref({
    close: 0,
    change_money: 0,
    change_ratio: 0,
    company_name: ''
})
const chartValue = ref('minute')
const xData = ref([])
const yData = ref([])
const getLeftStock = () => {
    let data = {
        symbol: props.label
    }
    homeRequest.getStockData(data)
        .then((res) => {
            if (res.code === 0) {
                if (res.data !== null) {
                    leftData.value = res.data
                }
            }
        })
}
const changeChart = () => {
    xData.value = []
    yData.value = []
    getTime()
}
// k线图
const getTime = () => {
    let data = {
        symbol: props.label,
        line: chartValue.value
    }
    homeRequest.getLine(data)
        .then((res) => {
            console.log(res)
            if (res.data !== null) {
                console.log("11111")
                res.data.forEach((item) => {
                    xData.value.push(item.currentTime)
                    yData.value.push(item.close)
                    renderChart()
                })
            } else {
                console.log("2222")
                xData.value = []
                yData.value = []
                renderChart()
            }
        })
}
const renderChart = () => {
    const myChart = echarts.init(myRef.value)
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                const dataIndex = params[0].dataIndex;
                return `${dataIndex}
                数值：${params[0].value}`;
            },
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        grid: {
            top: 10,
            left: 40,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData.value,
            axisTick: {
                show: true // 显示刻度线
            },
            axisLabel: {
                interval: 'auto'
            },
        },
        yAxis: {
            type: 'value',
            position: 'right',
            boundaryGap: [0, '100%']
        },

        series: [
            {
                name: 'Fake Data',
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: {
                    color: 'rgb(153,194,230)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(218,229,236)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(224,235,242)'
                        }
                    ])
                },

                data: yData.value,
            }
        ]
    })
}
defineExpose({
    getLeftStock,
    getTime
});
</script>
<style scoped lang='scss'>
.column {
    max-width: 960px;
}

.row {
    display: flex;

    .search__ticker {
        border: 1px solid #e1e1e1;
        padding: 3px 5px;
        margin: 0 3px 0 0;
        max-width: 100px;
    }

    .search__divider {
        color: #6a6a6a;
        margin-right: 6px;
    }

    .company__ticker {
        background: #3677a8;
        color: #fff;
        font-weight: 700;
        letter-spacing: .025em;
        margin-right: 5px;
        padding: 0 5px;
        line-height: 22px;
    }

    .company__symbol {
        display: flex;
        font-size: 0.75rem;
    }

    .company__market {
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        color: #262626;
        position: relative;
    }

    h1 {
        font-size: 1.5rem;
    }

    .btn {
        margin: 0 0 0 5px;
        white-space: nowrap;
        height: 30px;
        line-height: 32px;
        color: #fff;
        background: #367f2e;
        padding: 0 20px;
        cursor: pointer;
    }

    .btn:hover {
        background: #2e6c27;
    }
}

.row-flex {
    justify-content: space-between;
}

.element--intraday {
    position: relative;
    border-top: 2px solid #202020;
    padding-top: 10px;
    display: flex;
    flex-flow: column nowrap;
    height: 230px;
    width: 300px;
    text-align: right;
    align-items: flex-end;

    .status {
        color: #2e2e2e;
        text-transform: uppercase;
    }

    .icon--lock {
        font-size: .875rem;
        padding-right: 2px;
    }

    .icon--lock:before {
        content: "\e937";
        color: #2e2e2e;
    }

    .data {
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: -.025em;
        color: #202020;
        display: inline-block;
        margin-top: 10px;
    }

    .icon--caret:before {
        content: "\e909";
    }

    .per {
        margin-left: 10px;
    }
}

.time {
    line-height: 1;
    margin-top: 11px;
    color: #262626;
    font-size: .75rem;
    position: relative;
}

.time:before {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    width: 20px;
    border-bottom: 1px solid #c3c3c3;
}

.intraday__close {
    margin-top: 30px;
    width: 100%;
    text-align: left;

    .title {
        padding: 0 0 6px 5px;
        font-weight: 600;
        font-size: .75rem;
        color: #6a6a6a;
        border-bottom: 1px solid #e1e1e1;
        letter-spacing: .025em;
        text-transform: uppercase;
        vertical-align: bottom;
    }

    .name {
        padding: 5px 0;
        font-size: .875rem;
    }
}

.linetu {
    display: flex;
    width: 100%;

    .column--aside {
        display: block;
        max-width: 320px;
    }

    .chart__figure {
        display: block;
        width: 100%;
        height: 230px;
        border-top: 2px solid #272d32;
    }
}

.chart__range {
    position: relative;
    border: none;
    background: #3677a8;
    box-shadow: none;
    width: 60px;
    margin-top: 5px;

    .icons {
        position: absolute;
        right: 8px;
        top: 6px;
        color: #fff;
        font-size: 1rem;
    }

    .dropdown--chart {
        position: relative;
        z-index: 1;
        height: 30px;
        margin: 0 3px 0 0;
        width: 60px;
        padding: 0 20px 0 10px;
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        background: transparent;
        border: none;
    }
}

.negative .icon--caret:before {
    content: "\e908";
}
</style>